<template>
  <div id="thecarrierPaystable">
    <div class="carrier_header">
      <!-- 输入的内容 -->
    </div>
    <div class="carrier_button">
      <div>
        <div>
          <el-button
            data-tracker="P54-3"
            type="primary"
            plain
            @click="reimbureadd()"
            v-if="invoice_body_belong == 0"
            >新增</el-button
          >
          <el-button
            data-tracker="P54-3"
            type="primary"
            plain
            @click="removedatae()"
            v-if="invoice_body_belong == 0"
            >删除</el-button
          >
          <el-button
            @click="exportDerive()"
            plain
            type="primary"
            data-tracker="P50-4"
            v-permission="'finance_customer_delete'"
            >导出</el-button
          >
        </div>
        <div v-if="invoice_body_belong == 1">
          <!-- <el-button data-tracker="P54-3" type="primary" plain @click="abolish()">撤回</el-button> -->
        </div>
      </div>
      <div style="display: flex">
        <el-button
          style="margin: 0px 10px 0px 0px"
          data-tracker="P54-3"
          type="primary"
          @click="replacement()"
          >重置</el-button
        >
        <SettinUp
          :settype="16"
          :objSettinUpdata="objSettinUp"
          key="3"
        ></SettinUp>
      </div>
    </div>
    <div class="carrier_table" v-if="invoice_body_belong == 0">
      <TableHeader
        ref="TableHeaderList"
        :header_data_list="header_data_list"
        :HeaderData="HeaderData"
        :propMap="propMap"
        :objheader="objheader"
        @childEvent="handleDelete"
        @orderIdNumsEvent="handleDeleteType"
        :operation_type="operation_type"
        @handleClickDetail_second="handleClickDetail_second"
        @handleClickEdit_second="handleClickEdit_second"
        particulars="finance_payable_apply_list"
        redact="finance_payable_apply_list"
      >
      </TableHeader>
    </div>
    <div class="carrier_table" v-else>
      <TableHeader
        ref="TableHeaderList"
        :header_data_list="header_data_list"
        :HeaderData="HeaderData"
        :propMap="propMap"
        :objheader="objheader"
        @childEvent="handleDelete"
        @orderIdNumsEvent="handleDeleteType"
        :operation_type="operation_type"
        @handleClickDetail_second="handleClickDetail_second"
        @handleClickEdit_second="handleClickEdit_second"
        particulars="finance_payable_apply_list"
      >
      </TableHeader>
    </div>
    <div class="table_page">
      <el-pagination
        background
        @size-change="handleSizeChangeObj"
        @current-change="handleSizeChangeObjlist"
        :current-page="dataList.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
      >
      </el-pagination>
    </div>
    <div>
      <div class="table_table">
        <el-dialog
          title="对账单"
          :visible.sync="dialogTableVisible"
          width="80%"
        >
          <div class="table_header">
            <el-form ref="form" :model="query" :inline="true">
              <el-form-item label="对账单号" size="mini" style="width: 270px">
                <el-input
                  v-model="query.account_no"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="承运商名称" size="mini" style="width: 290px">
                <el-select
                  filterable
                  @focus="getCarrierList"
                  v-model="query.account_customer_id"
                  style="width: 200px"
                >
                  <el-option
                    v-for="carrier in carrierList"
                    :key="carrier.id"
                    :label="carrier.name"
                    :value="carrier.id + ''"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="创建对账单时间"
                size="mini"
                style="width: 340px"
              >
                <el-date-picker
                  v-model="creationTimee"
                  type="daterange"
                  value-format="timestamp"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  :default-time="['00:00:00', '23:59:59']"
                  style="width: 230px"
                />
              </el-form-item>
              <el-form-item size="mini">
                <el-button
                  type="primary"
                  data-tracker="P50-1"
                  icon="el-icon-search"
                  @click="searchSenderCheckList"
                  >查询</el-button
                >
                <el-button
                  plain
                  icon="el-icon-refresh-left"
                  data-tracker="P50-2"
                  @click="resettingData"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="table_page">
            <el-pagination
              background
              @size-change="handleSizeChangeone"
              @current-change="handleCurrentChangeone"
              :current-page="query.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="alltotal"
            >
            </el-pagination>
          </div>
          <div class="table_data">
            <el-table
              :data="ordersList"
              border
              style="width: 120%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="45"> </el-table-column>
              <el-table-column
                prop=""
                fixed
                label="序号"
                width="50"
                type="index"
              ></el-table-column>
              <el-table-column prop="account_no" label="对账单号" width="180">
                <template slot-scope="scope">
                  <div
                    @click="clickToDetail(scope.row.id)"
                    style="cursor: pointer; color: blue"
                  >
                    {{ scope.row.account_no }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="account_customer_name"
                label="承运商名称"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="is_adjust" label="是否调账">
                <template slot-scope="scope">
                  {{ scope.row.is_adjust === "1" ? "是" : "否" }}
                </template>
              </el-table-column>
              <el-table-column prop="ap_status" label="审批状态" width="240">
                <template slot-scope="scope">
                  {{
                    ["待审批", "审批中", "待开票", "已开票", "已收款"][
                      scope.row.ap_status
                    ]
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="now_price" label="对账金额" width="240">
              </el-table-column>
              <el-table-column prop="creator" label="创建人" width="240">
              </el-table-column>
              <el-table-column prop="type" label="创建人类型" width="240">
                <template slot-scope="scope">
                  {{ scope.row.type === "0" ? "发货客户" : "承运商" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="创建对账单时间"
                width="240"
              >
                <template slot-scope="scope">
                  {{
                    new Date(Number(scope.row.create_time) * 1000)
                      .toLocaleString()
                      .replace(/:\d{1,2}$/, " ")
                  }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="tableButton">
            <el-button type="primary" plain @click="NewStatement()"
              >下一步</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { getCarrierCheckedList } from "@/api/finance";
import { carrierList } from "@/api/information";
import {
  payable_appllist,
  payable_applsend_review,
  payable_applcancel_review,
  financet_payable_apply_delete,
  finance_payable_apply_list_export,
} from "@/api/paymentrequest";
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
export default {
  name: "thecarrierPaystable",
  props: ["invoice_body_belong"],
  components: { TableHeader, SettinUp },
  data() {
    return {
      dialogTableVisible: false,
      ordersList: [],
      alltotal: 0,
      query: {
        account_no: "",
        account_customer_id: "",
        account_status: "2",
        is_deleted: "",
        start_time: "",
        end_time: "",
        page: 1,
        page_size: "10",
      },
      creationTimee: [], //创建对账时间单
      carrierList: [], //承运商名称
      idlist: [], //选中的的数据列
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      QueryData: {
        ids: [],
        status_list: [],
        apply_no: "",
        create_time: {
          start_time: "",
          end_time: "",
        },
        page: 1,
        page_size: 10,
        create_time_list: [],
      },

      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
      operation_type: 1,
      totalPage: 0,
      dataList: {
        page: 1,
        page_size: 10,
      },
      finance0001: "",
    };
  },
  mounted() {
    // if (this.invoice_body_belong == 0) {

    //     this.finance0001 = "finance_payable_apply_update"
    // }
    this.getCarrierList(); //承运商名称
    this.displayOrders(); //列表接口
    this.ObjgetCarrierCheckedList();
  },
  methods: {
    ObjgetCarrierCheckedList() {
      var param = {
        ...this.dataList,
        header_id: 16 + "",
        status_list:this.settingStatus(),
      };
      payable_appllist(param).then((res) => {
        this.orders = res.data.data || [];
        this.orders.unshift({});
        this.header_data_list = this.orders;
        this.HeaderData = res.data.item_list;
        this.Fntransformation(this.HeaderData);
        this.totalPage = res.data.pagination.total;
      });
    },
    objheader(obj) {
      var data = {
        header_id: 16 + "",
        page: 1,
        page_size: 10,
        status_list:this.settingStatus(),
        ...obj,
        create_time: {
          start_time: "",
          end_time: "",
        },
      };
      this.obj_list = obj;
      payable_appllist(data).then((res) => {
        this.header_data_list = res.data.data;
        if (res.code === 10000 && res.data.data !== null) {
          this.header_data_list.unshift({});
          this.totalPage = res.data.pagination.total;
        } else {
          this.header_data_list = [{}];
          this.paginations.total = 0;
          this.orderslength = 0;
        }
      });
    },
    handleDelete(index, id, type) {
      this.handleJumpDetail(id);
    },
    handleDeleteType(value) {
      this.waybillIdNums = value;
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    displayOrders() {
      var param = {
        ...this.query,
        start_time:
          this.creationTimee !== null && this.creationTimee[0]
            ? String(parseInt(this.creationTimee[0] / 1000))
            : "",
        end_time:
          this.creationTimee !== null && this.creationTimee[1]
            ? String(parseInt(this.creationTimee[1] / 1000))
            : "",
        page: this.query.page + "",
        ap_status: "0",
      };
      getCarrierCheckedList(param).then((res) => {
        // console.log(res.data.data, "res.data.data");
        this.ordersList = res.data.data;
        this.alltotal = res.data.pagination.total * 1;
      });
    },
    reimbureadd() {
      this.dialogTableVisible = true;
    },
    getCarrierList() {
      var param = {
        carrier_type: "1",
        name: "",
      };
      carrierList(param).then((res) => {
        this.carrierList = res.data.list || [];
      });
    },
    handleSizeChangeone(val) {
      Object.assign(this.$data.query, this.$options.data().query);
      this.query.page_size = val + "";

      this.displayOrders();
      // console.log(`每页 ${val} 条123`);
    },
    handleCurrentChangeone(val) {
      Object.assign(this.$data.query, this.$options.data().query);
      this.query.page = val + "";

      this.displayOrders();
      // console.log(`当前页: ${val}12312`);
    },
    // 查询
    searchSenderCheckList() {
      this.displayOrders();
    },
    // 重置
    resettingData() {
      this.creationTimee = [];
      Object.assign(this.$data.query, this.$options.data().query);
      this.displayOrders();
    },
    // 选中的数据
    handleSelectionChange(val) {
      this.idlist = val;
    },
    NewStatement() {
      if (this.idlist.length == 1) {
        this.$router.push({
          name: "thecarrierPaysadd",
          query: {
            Type: 0,
            id: this.idlist[0].id,
            account_customer_name: this.idlist[0].account_customer_name,
            account_no: this.idlist[0].account_no,
            now_price: this.idlist[0].now_price,
            account_customer_id: this.idlist[0].account_customer_id,
            TageType: this.invoice_body_belong,
          },
        });
      } else {
      }
    },
    handleClickDetail_second(val) {
      this.$router.push({
        name: "thecarrierPaysadd",
        query: {
          id: val.id,
          Type: 2,
          TageType: this.invoice_body_belong,
        },
      });
    },
    handleClickEdit_second(val) {
      this.$router.push({
        name: "thecarrierPaysadd",
        query: {
          id: val.id,
          Type: 1,
          TageType: this.invoice_body_belong,
        },
      });
    },
    // 发送审核
    transmit() {
      if (this.waybillIdNums.length > 0) {
        var param = {
          id: this.waybillIdNums[0] + "",
        };
        payable_applsend_review(param).then((res) => {
          this.ObjgetCarrierCheckedList();
        });
      }
    },
    // 取消审核
    abolish() {
      var param = {
        id: this.waybillIdNums[0] + "",
      };
      payable_applcancel_review(param).then((res) => {
        this.ObjgetCarrierCheckedList();
      });
    },
    handleSizeChangeObj(val) {
      this.dataList.page_size = val;

      this.ObjgetCarrierCheckedList();
      // console.log(`每页 ${val} 条`);
    },
    handleSizeChangeObjlist(val) {
      this.dataList.page = val;

      this.ObjgetCarrierCheckedList();

      // console.log(`当前页: ${val}`);
    },
    objSettinUp() {
      this.ObjgetCarrierCheckedList();
    },
    clickToDetail(val) {
      this.$router.push({
        name: "carrierreconciliation",
        query: { id: val, dataPage: 0 },
      });
    },
    removedatae() {
      if (this.waybillIdNums.length > 0) {
        var param = {
          id: this.waybillIdNums[0] + "",
        };
        // console.log(this.waybillIdNums, "this.waybillIdNums[删除数据]");
        financet_payable_apply_delete(param).then((res) => {
          this.ObjgetCarrierCheckedList();
        });
      }
    },
    replacement() {
      this.$refs.TableHeaderList.childMethod();
      // this.paginations.pageIndex = 1;
      // this.getdeliveryListFn();
    },
    exportDerive() {
      var params = {
        ...this.dataList,
        header_id: 16 + "",
        status_list:
        this.settingStatus(),
      };
      finance_payable_apply_list_export(params).then((res) => {
        this.reqUrl = "https://" + res.data.loaded_url;
        window.open(this.reqUrl);
      });
    },
    settingStatus() {
      // 0,4 是待审批的
      var invoice_status = []
      if(this.invoice_body_belong * 1 == 2 ) {
        invoice_status = [2, 3]
      }else if (this.invoice_body_belong * 1 == 0 ) {
        invoice_status = [0,4]
      } else {
        invoice_status =[ this.invoice_body_belong * 1]
      }
      return invoice_status
    }
  },
};
</script>
<style scoped lang="less">
.table_page {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.table_creation {
  margin: 10px 0px 0px 0px;
  text-align: center;
}

.carrier_button {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.tableButton {
  text-align: center;
  margin: 10px 0px 0px 0px;
}
</style>